<template>
	<div class="main">
		<el-row :gutter="1">
			<el-col :span="14">
				<el-card
					shadow="never"
					style="width: 98%; height: 60vh; margin: 0 auto; margin-bottom: 10px"
				>
					<!--					<el-empty description="什么都没有呢" />-->
					<el-row :gutter="20">
						<el-col :span="12">
							<div style="width: 100%;text-align: center;padding-bottom: 20px;font-size: 26px">原始图</div>
						</el-col>
						<el-col :span="12">
							<div style="width: 100%;text-align: center;padding-bottom: 20px;font-size: 26px">检测图</div>
						</el-col>

					</el-row>
					<el-row v-if="state.activity === 'img'" :gutter="20">
						<el-col :span="12"
							><el-image
							style="width: 100%; height: 100%"
							:src="imageUrl"
						/></el-col>
						<el-col :span="12">
							<el-image
								style="width: 100%; height: 100%"
								:src="state.imgProcessed.processed_image"
							/>
						</el-col>
					</el-row>
				</el-card>
				<el-card
					style="width: 98%; height: 30vh; margin: 0 auto"
					shadow="never"
				>
					<template #header>
						<div class="card-header">
							<span>检测历史结果与位置信息</span>
						</div>
					</template>
					<el-table :height="300" :data="state.tableData" style="width: 100%" >
						<el-table-column prop="id" label="编号"/>
						<el-table-column prop="create_time" label="检测时间"  width="180" />
						<el-table-column  label="详细结果" width="600" >
							<template #default="scope">
								<div style="width: 100%;height: 20px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
									{{  scope.row.results }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="image" label="原始文件地址" width="180"/>
						<el-table-column prop="processed_image" label="检测结果地址" width="320" />

					</el-table>
				</el-card>
			</el-col>
<!--			右边-->
			<el-col :span="10" class="rigth">
				<!--				操作区域-->
				<el-card
					style="width: 98%; height: 160px; margin: 0 auto"
					shadow="never"
				>
					<template #header><div class="card-header"><span>操作</span></div></template>
					<el-row :gutter="20" style="margin-bottom: 20px">
						<el-col :span="12">
							<el-upload
								:show-file-list="false"
								:action="state.imgPath"
								:on-success="handleAvatarSuccess"
							>
								<el-button type="primary">
									<el-icon class="el-icon--right">
										<PictureFilled />
									</el-icon>
									切换图片
								</el-button>
							</el-upload>
						</el-col>
						<el-col :span="12">
							<el-upload
								:show-file-list="false"
								action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
							>
								<el-button type="primary">
									<el-icon class="el-icon--right">
										<VideoCameraFilled />
									</el-icon>
									切换视频
								</el-button>
							</el-upload>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-button type="primary">
								<el-icon class="el-icon--right">
									<VideoCamera />
								</el-icon>
								切换摄像头
							</el-button>
						</el-col>
						<el-col :span="12">
							<el-button type="primary">
								<el-icon class="el-icon--right">
									<CirclePlus />
								</el-icon>
								保 存
							</el-button>
						</el-col>
					</el-row>
				</el-card>

				<!--				目标总数-->
				<el-card shadow="never" style="width: 98%; height: 70vh; margin: 0 auto; margin-bottom: 5px">
					<el-card style="width: 100%; margin-bottom: 10px" shadow="never">
						<template #header><div class="card-header"><span>目标置信度</span></div></template>
						<el-row :gutter="20" v-for="(item,index) in state.imgProcessed.results">
							<el-col :span="8"><span style="font-size: 15px">检测目标{{index+1}}</span>:</el-col>
							<el-col :span="8">模型置信度：<span class="font-value">{{item.detect_conf.toFixed(2)}}</span></el-col>
							<el-col :span="8">车牌颜色置信度：<span class="font-value">{{item.color_conf.toFixed(2)}}</span></el-col>
<!--							<el-col :span="7">车牌号：{{item.plate_no}}</el-col>-->
						</el-row>
					</el-card>

					<el-card style="width: 100%; margin-bottom: 10px" shadow="never">
						<template #header><div class="card-header"><span>目标信息</span></div></template>
						<el-row :gutter="20" v-for="(item,index) in state.imgProcessed.results">
							<el-col :span="4"><span  style="font-size: 15px">检测目标{{index+1}}</span>:</el-col>
							<el-col :span="7">车牌号：<span class="font-value">{{item.plate_no}} </span> </el-col>
							<el-col :span="7">车牌颜色：<span class="font-value">{{item.plate_color}} </span>  </el-col>
							<el-col :span="6">车牌高度：<span class="font-value">{{item.roi_height}} </span>  </el-col>
						</el-row>
					</el-card>

					<el-card style="width: 100%; margin-bottom: 10px" shadow="never">
						<template #header><div class="card-header"><span>检测目标位置</span></div></template>

						<el-row :gutter="20" v-for="(item,index) in state.imgProcessed.results">
							<el-col :span="4"><span  style="font-size: 15px">目标坐标{{index+1}}</span>:</el-col>
							<el-col :span="5">左上x坐标：<span class="font-value">{{item.rect[0]}} </span> </el-col>
							<el-col :span="5">左上y坐标：<span class="font-value">{{item.rect[1]}} </span> </el-col>
							<el-col :span="5">右下x坐标：<span class="font-value">{{item.rect[2]}} </span> </el-col>
							<el-col :span="5">右下y坐标：<span class="font-value">{{item.rect[3]}} </span> </el-col>
						</el-row>
					</el-card>

					<el-card style="width: 100%; margin-bottom: 10px" shadow="never">
						<template #header>
							<div class="card-header">
								<span>检测参数配置</span>
							</div>
						</template>
						<el-row :gutter="20">
							<el-col :span="12">
								置信度阈值：
								<el-input-number
									v-model="state.z"
									:min="0.01"
									:precision="2"
									:step="0.01"
									:max="1"
								/>
							</el-col>
							<el-col :span="12">
								交并比阈值：
								<el-input-number
									v-model="state.j"
									:min="0.01"
									:precision="2"
									:step="0.01"
									:max="1"
								/>
							</el-col>
						</el-row>
					</el-card>
					<el-card style="width: 100%; " shadow="never">
						<template #header>
							<div class="card-header">
								<span>目标参数</span>
							</div>
						</template>
						<el-row>
							<el-col :span="24" style="display: flex; align-items: center">
								<span style="margin-right: 10px">选择目标：</span>
								<el-select
									v-model="state.type"
									placeholder="请选择目标"
									style="flex: 1"
								>
									<el-option label="狗" value="狗" />
									<el-option label="猫" value="猫" />
								</el-select>
							</el-col>
						</el-row>
						<el-row :gutter="20" style="padding-top: 10px">
							<el-col :span="12">
								<span class="font">当前类型：</span>
								{{ state.type }}
							</el-col>
							<el-col :span="12">
								<span class="font">用时：</span>
								0.002s
							</el-col>
						</el-row>
					</el-card>

				</el-card>
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts">
import type { UploadProps } from 'element-plus'

const state = reactive(<any>{
	activity: 'img',
	imgPath: import.meta.env.VITE_API_BASE_URL + '/upload_image',
	z: '',
	j: '',
	m: '',
	type: '',
	tableData: [],
	imgProcessed: {},
	activityRect: [],
	eventSource: null, // 用于存储 EventSource 实例
})
const imageUrl = ref('')

function startEventSource() {
	state.eventSource = new EventSource(`${import.meta.env.VITE_API_BASE_URL}/upload_video`);
	state.eventSource.onmessage = (event) => {
		state.imgProcessed = JSON.parse(event.data)
		console.log(JSON.parse(event.data))
	};

	state.eventSource.onerror = (error) => {
		console.error("SSE错误:", error);
		this.stopEventSource(); // 发生错误时停止
	};
}

function stopEventSource() {
	if (state.eventSource) {
		state.eventSource.close();
		state.eventSource = null; // 清空事件源
		console.log("停止接收数据");
	}
}


/**
 * 上传图片
 * @param response
 * @param uploadFile
 */
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile,) => {
	init()
	imageUrl.value = URL.createObjectURL(uploadFile.raw!)
	state.imgProcessed = response.data
	//检测出来信息，列表返回
	state.activityRect = response.data.results
	if (response.data.results.length <= 0) {
		toast.warning("似乎什么都没有检测出来")
		return
	}
	toast.success("检测成功")
}


onMounted(() =>{
	startEventSource()

	init()
})

function init() {
	http.get("history").then(res =>{
		state.tableData = res.data
	})
}

</script>

<style scoped>
.main {
	width: 100%;
}

:deep(.el-upload){
	width: 100%;
}

:deep(.el-button) {
	width: 100%;
}
:deep(.el-card__header) {
	padding: 10px 10px;
}
.font {
	font-weight: 700;
}

.font-value{
	font-weight: 700;
	font-size: 15px
}
</style>
